<template>
	<view>
		<view class="data-details">
			<view class="data-select">
				<view class="select-type" @click="changeTypeToggle">
					<text>{{type.label}}</text>
					<u-icon :name="typeToggle?'arrow-up-fill':'arrow-down-fill'"></u-icon>
					<view class="select-list">
						<view class="select-item" @click.stop="changeType(item)" v-show="typeToggle"
							v-for="item in typeList" :key="item.id">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="select-data" @click="show = true">
					<text>{{beginDate}}</text>
					<image src="/static/svg/datepicker.svg" mode=""></image>
				</view>
				至
				<view class="select-data" @click="show2 = true">
					<text>{{endDate}}</text>

					<image src="/static/svg/datepicker.svg" mode=""></image>
				</view>
				<view class="clear" @click="emptyDate">
					<image src="/static/svg/clear.svg" mode=""></image>
					清空
				</view>
			</view>
			<view class="data-item" v-for="item in dataListClone" :key="item.id">
				<view class="data-item-title">
					<title fontSize="28rpx" :title="item.execute_at" borderSize="6rpx" />
					<text>{{type.id === 3 ? 1 : item.flyNum}}</text>
					<view class="choose-item-box" v-show="checkFlat">
						<u-checkbox-group @change="toggleItemAll(item)">
							<u-checkbox activeColor="#40c98b" size="30rpx"
								:checked="type.id===3? item.panoramaCheck.length===1 : item.fly_result_arr.length===item.listCheck.length"
								:name="item.id">
							</u-checkbox>
						</u-checkbox-group>
					</view>

				</view>
				<u-checkbox-group v-model="item.listCheck" placement="column" v-if="type.id!==3"
					@change="checkboxChange">
					<view class="data-item-content">
						<view class="card-item" @longpress="showCheckBox" v-if="it.file_thumbnails_link"
							v-for="it in item.fly_result_arr" :key="it.id">
							<image @click="pageGo(item,it.id)" :src="it.file_thumbnails_link" mode="aspectFill">
							</image>


							<view class="card-message">
								<view class="name">
									{{it.file_name}}
								</view>
								<view class="date">
									{{it.timestamp}}
								</view>
								<view class="choose-box" v-show="checkFlat">
									<u-checkbox activeColor="#40c98b" size="30rpx" :customStyle="{marginBottom: '8px'}"
										:key="it.id" :name="it.id">
									</u-checkbox>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
				<u-checkbox-group v-model="item.panoramaCheck" placement="column" v-if="type.id===3"
					@change="checkboxChange">
					<view class="data-item-content">
						<view class="card-item" @longpress="showCheckBox">

							<image @click="pageGo(item,item.id)" src="/static/images/full-view.png" mode="aspectFill">
							</image>

							<view class="card-message">
								<view class="name">
									{{item.mission_name}}
								</view>
								<view class="date">
									{{item.execute_at}}
								</view>
								<view class="choose-box" v-show="checkFlat">
									<u-checkbox activeColor="#40c98b" size="30rpx" :customStyle="{marginBottom: '8px'}"
										:key="item.id" :name="item.id">
									</u-checkbox>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>

			</view>

			<!-- <view class="delete-box" @click="deleteItem" :class="checkFlat?'up':'down'">
				<u-icon color="#b1b1b1" name="trash" size="26"></u-icon>
			</view> -->
			<view class="fixed-box" :class="checkFlat?'up':'down'">
				<view class="choose-all-box">
					<u-checkbox-group v-model="checkedAllFlat" iconPlacement="left" @change="toggleAll" shape="circle"
						placement="row">
						<u-checkbox :activeColor="activeColor" :checked="checkedAllFlat.length>0" name="全选"
							label="全选"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="fixed-btns">
					<text @click="checkFlat=false">取消</text>
					<!-- <text @click="download">下载</text> -->
					<text @click="deleteItem">删除</text>
				</view>

			</view>
			<u-datetime-picker :show="show" :maxDate="value1===''?new Date().getTime()+315360000000:value2"
				v-model="value1" mode="date" @cancel="close" @confirm="confirm"></u-datetime-picker>
			<u-datetime-picker :minDate="value1===''?new Date().getTime():value1"
				:maxDate="new Date().getTime()+315360000000" :show="show2" v-model="value2" mode="date" @cancel="close"
				@confirm="confirm"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import {
		filterDate
	} from "../../utils/filterDate.js"
	import {
		DeleteFlyResultByIds,
		postDataResultDownload
	} from "../../api/index.js"
	export default {
		data() {
			return {
				activeColor: "#40c98b",
				show: false,
				show2: false,
				value1: '',
				value2: '',
				typeToggle: false,
				checkFlat: false,
				checkedAllFlat: false,
				type: {
					id: 1,
					label: "图片"
				},
				checkItems: [],
				typeList: [{
					id: 1,
					label: "图片"
				}, {
					id: 2,
					label: "视频"
				}, {
					id: 3,
					label: "全景"
				}],
				page: 1,
				dataList: [],
				dataListClone: [],
				flag: false
			};
		},
		created() {
			let arr = JSON.parse(uni.getStorageSync("exec_record_arr"))
			if (arr.length > 0) {
				arr = arr.filter(item => item.fly_result_arr.length > 0 || item.panorama_link !== "")
			}
			arr.map(item => {
				item.execute_at = filterDate(item.execute_at),
					item.fly_result_arr.forEach(ele => {
						if (ele.file_link) {
							ele.file_link = ele.file_link.replaceAll(`\\`, "/")
						}
						if (ele.file_thumbnails_link) {
							ele.file_thumbnails_link = ele.file_thumbnails_link.replaceAll(`\\`, "/")
						}
						ele.timestamp = filterDate(ele.timestamp)

					})
				Object.assign(item, {
					listCheck: [],
					panoramaCheck: []
				})
			})
			this.dataList = arr
			// this.dataListClone = JSON.parse(JSON.stringify(this.dataList))
		},
		onReachBottom() {
			this.page++
			if (this.flag) {
				uni.showToast({
					title: "到底了"
				})
			} else {
				uni.showLoading({
					mask: true,
					title: "数据加载中"
				})
			}

		},
		computed: {
			beginDate() {
				return this.value1 === '' ? '开始日期' : filterDate(this.value1, 3)
			},
			endDate() {
				return this.value2 === '' ? '结束日期' : filterDate(this.value2, 3)
			},
			filterDataList() {
				// oldId 数据的id
				let oldId = this.dataListClone.map(item => item.id)
				// 查询是否有改条作业记录
				this.dataList.forEach(ele => {

					let idx = oldId.indexOf(ele.id)
					// 如果有 记录旧数据的选择项
					if (idx !== -1) {
						ele.listCheck = this.dataListClone[idx].listCheck
					}
				})
				let index = 0
				// 拷贝主数据
				let modeDataList = JSON.parse(JSON.stringify(this.dataList))
				modeDataList.forEach(ele => {
					// 添加 条数数据
					let fl = ele.fly_result_arr.filter(item => item.type === this.type.id).length
					Object.assign(ele, {
						flyNum: fl
					})
					let idx = this.dataListClone.findIndex(i => i.id === ele.id)
					if (idx > -1) {
						this.dataListClone[idx].flyNum = fl
					}

					// 过滤数据
					ele.fly_result_arr = ele.fly_result_arr.filter(item => {
						// 类型相同
						if (item.type === this.type.id) {
							if (this.flag === false) {
								index++
							}
							return index <= this.page * 16 && index > (this.page - 1) * 16
						}
					})
				})
				// 全景
				if (this.type.id === 3) {
					modeDataList = modeDataList.filter(item => item.panorama_link !== "")
				} else {
					// 非全景
					modeDataList = modeDataList.filter(item => item.fly_result_arr.length > 0)
				}
				if (this.value1 !== "" && this.value2 !== "") {
					// 是否筛选时间
					modeDataList = modeDataList.filter((item) => {
						return new Date(item.execute_at).getTime() > this.value1 && new Date(item.execute_at)
							.getTime() < this
							.value2 + 86400000
					})
				}
				// 判断是否触底
				this.flag = JSON.stringify(this.dataListClone) == JSON.stringify(modeDataList)

				// this.dataListClone = modeDataList
				// 获取旧的航线id
				const oldParentIds = this.dataListClone.map(item => item.id)
				// 获取旧的作业记录id
				const oldChildIds = this.dataListClone.map(item => item.fly_result_arr.map(item2 => item2.id))
				// 初始化 旧数组
				const oldArr = []
				for (let i = 0; i < oldParentIds.length; i++) {
					oldArr.push({
						oldParentId: oldParentIds[i],
						oldChildId: oldChildIds[i]
					})
				}
				// 模型数据进行筛选 
				modeDataList.forEach(item => {
					let idx = oldArr.findIndex(item2 => item2.oldParentId === item.id)
					// 判断克隆数据是否存在航线id
					if (idx > -1) {
						// 存在及添加数据成果不一样的id

						this.dataListClone[idx].fly_result_arr.push(...item.fly_result_arr.filter(item3 => !oldArr[
							idx].oldChildId.includes(
							item3.id)))
					} else {
						// 不存在直接添加数据
						this.dataListClone.push(item)
					}
				})
				this.dataListClone = this.dataListClone.filter(ele => {
					ele.fly_result_arr = ele.fly_result_arr.filter(item => item.type === this.type.id)
					return ele.fly_result_arr.length > 0

				})
				if (!this.flag) {
					let timer = setTimeout(() => {
						uni.hideLoading()
						clearTimeout(timer)
					}, 1000)
				}
				console.log(modeDataList, '<=modeDataList')
				return modeDataList
			}
		},
		watch: {
			dataListClone: {
				handler(n, o) {

					let arr = [];
					let arr2 = []
					n.forEach(ele => {
						if (this.type.id === 3) {
							arr.push(ele.panoramaCheck.length === 1)
							if (ele.panoramaCheck.indexOf(ele.id) !== -1) {
								arr2.push({
									record_ids: ele.id,
								})
							}
						} else {
							arr.push(ele.listCheck.length === ele.fly_result_arr.length)
							if (ele.fly_result_arr.length > 0) {
								ele.fly_result_arr.forEach(item => {
									if (ele.listCheck.indexOf(item.id) !== -1) {
										arr2.push({
											name: item.execute_id + "/" + item.file_name,
											id: item.id,
										})
									}
								})
							}
						}

					})
					this.checkItems = arr2

					let eFlat = arr.every(item => item)
					this.checkedAllFlat = eFlat ? ["全部"] : []
				},
				deep: true
			},
			type: {
				handler() {
					this.page = 1
				},
				deep: true

			}
		},
		methods: {
			close() {
				this.show = false
				this.show2 = false
			},
			confirm() {
				this.show = false
				this.show2 = false
			},
			emptyDate() {
				this.value1 = ''
				this.value2 = ''
			},
			checkboxChange(n) {
				console.log(n, 'checkboxChange')
			},
			toggleItemAll(item) {
				if (this.type.id === 3) {
					if (item.panoramaCheck.length < 1) {
						item.panoramaCheck.push(item.id)
					} else {
						item.panoramaCheck = []
					}
				} else {
					if (item.listCheck.length < item.fly_result_arr.length) {
						item.listCheck.push(...item.fly_result_arr.map(it => it.id))
					} else {
						item.listCheck = []
					}
				}

			},
			showCheckBox() {
				this.checkFlat = true
			},
			toggleAll(n) {
				if (n.length > 0) {
					this.dataListClone.forEach(ele => {
						ele.listCheck = ele.fly_result_arr.map(item => item.id)
						ele.panoramaCheck.push(ele.id)
					})
				} else {
					this.dataListClone.forEach(ele => {
						ele.listCheck = []
						ele.panoramaCheck = []
					})
				}
			},
			download() {
				// console.log(this.dataListClone,'dataListClone')
				// 
				postDataResultDownload({
					data_paths: [...this.checkItems.map(item => item.name)]
				}).then(res => {
					console.log(res, 'res')
				}).catch(err => {
					console.log(err, 'err')
				})
			},
			deleteItem() {
				uni.showModal({
					title: `确认删除选中的${this.checkItems.length}${this.type.id===1?'张图片':this.type.id===2?'个视频':"个全景"}`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: "删除数据中..."
							})
							let arr = this.checkItems.map(item => item.id)
							let arr2 = this.checkItems.map(item => item.record_ids)
							DeleteFlyResultByIds({
								ids: [...this.checkItems.map(item => item.id)],
								record_ids: [...this.checkItems.map(item => item.record_ids)]
							}).then(res => {

								this.dataListClone.forEach(ele => ele.listCheck = [])
								this.dataListClone.forEach(ele => ele.panoramaCheck = [])
								this.dataList.forEach(ele => {
									ele.fly_result_arr = ele.fly_result_arr.filter(item => {
										return !arr.includes(item.id)
									})
									if (arr2.includes(ele.id)) {
										ele.panorama_link = ""
									}
								})
								this.dataListClone.forEach(ele => {
									ele.fly_result_arr = ele.fly_result_arr.filter(item => {
										return !arr.includes(item.id)
									})
									if (arr2.includes(ele.id)) {
										ele.panorama_link = ""
									}
								})
								this.checkItems = []
								uni.showToast({
									title: "删除成功"
								})
							}).catch(err => {
								uni.showToast({
									title: "删除失败"
								})
							})

						} else {
							console.log('cancel')
						}

					}
				})


			},
			pageGo(item, id) {
				// 全景
				let index = item.fly_result_arr.findIndex(it => it.id === id)
				let arr = item.fly_result_arr.map(it => it.file_link)
				if (this.type.id === 3) {
					uni.navigateTo({
						url: `/dataOutcomePages/fullView/fullView?id=${this.type.id}&url=${item.panorama_link}`
					})
				} else if (this.type.id === 1) {

					uni.previewImage({
						current: index,
						urls: arr,
					})
				} else if (this.type.id === 2) {
					uni.navigateTo({
						url: `/dataOutcomePages/fullView/fullView?id=${this.type.id}&url=${item.fly_result_arr[index].file_link}`
					})
				}

			},
			changeTypeToggle() {
				this.typeToggle = !this.typeToggle
			},
			changeType(item) {
				this.type = item
				this.typeToggle = false
			}
		}
	}
</script>

<style lang="scss">
	.data-details {
		margin: 20rpx 40rpx;
		padding-bottom: 60rpx;
		position: relative;

		.data-select {
			height: 60rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.select-type {
				display: flex;
				width: 90rpx;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.select-list {
					position: absolute;
					top: 50rpx;
					width: 100%;
					background-color: white;
					box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.25);
					border-radius: 10rpx;
					z-index: 6;

					.select-item {
						text-align: center;
						margin: 20rpx 0;

					}
				}
			}

			.select-data {
				height: 60rpx;
				width: 190rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1px solid $color-gray;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;

				>text {
					width: 140rpx;
					text-align: center;
				}

				>image {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					height: 30rpx;
					width: 30rpx;
					right: 10rpx;

				}
			}

			>.clear {
				width: 120rpx;
				height: 60rpx;
				font-size: 24rpx;
				color: white;
				background-color: $color-blue;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				>image {
					height: 40rpx;
					width: 40rpx;
					margin-right: 4rpx;
				}
			}
		}

		.data-item {
			margin-top: 24rpx;
			margin-bottom: 66rpx;
			border-radius: 10rpx;

			&-title {
				display: flex;
				width: 100%;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				align-items: center;
				height: 80rpx;
				position: relative;

				.choose-item-box {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 10rpx;
				}

				>text {
					font-size: 24rpx;
					height: 50rpx;
					padding: 0 10rpx;
					background: $color-gray;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
					border-radius: 10rpx;
				}
			}

			box-shadow: 0px 3px 8px 0px #00000040;

			.data-item-content {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			.card-item {
				width: 326rpx;
				height: 308rpx;
				background: #F7F6F6;

				&:nth-child(n+3) {
					margin-top: 22rpx;
				}

				>image {
					height: 210rpx;
					width: 100%;
					background-color: $color-green;
				}

				>.video {
					height: 210rpx;
					width: 100%;
				}

				.card-message {
					height: 98rpx;
					font-size: 24rpx;
					text-align: center;
					position: relative;

					.name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.choose-box {
						position: absolute;
						bottom: 6rpx;
						right: 4rpx;
					}
				}
			}
		}

		.fixed-box {
			padding: 0 20rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: white;
			position: fixed;
			bottom: 0;
			left: 0;
			box-shadow: 0px 8px 24px 0px #00000040;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			height: 110rpx;
			transition: .3s;

			&.up {
				bottom: 0rpx;
			}

			&.down {
				bottom: -110rpx;
			}

			>.fixed-btns {
				font-size: 26rpx;
				display: flex;
				align-items: center;
				width: 510rpx;
				justify-content: space-between;

				>text {
					color: white;
					background-color: $color-blue;
					border-radius: 10rpx;
					width: 240rpx;
					padding: 12rpx 0;
					text-align: center;

					&:last-child {
						background-color: $color-green;
					}
				}
			}
		}

		.delete-box {
			position: fixed;
			right: 20rpx;
			bottom: 160rpx;
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid $color-gray;

			&.up {
				display: flex;
			}

			&.down {
				display: none;
			}
		}
	}
</style>